<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      /**
       * 浏览器在加载页面时，是按照自上向下加载的
       *  读取一行就运行一行，如果script标签写在页面的上边
       * 代码执行时，页面还没加载,页面没有加载DOM对象已经加载完毕了
       */

      //   var btn = document.getElementById("btn");

      //   btn.onclick = function () {
      //     alert("点击");
      //   };
    </script>
  </head>
  <body>
    <button id="btn">按钮</button>
    <script>
      /**
       * onload事件会在整个页面加载完成后触发
       * 为window绑定一个onload事件
       */
      window.onload = function () {
        // 获取id为bth的按钮
        var bth = document.getElementById("bth");
        btn.onclick = function () {
          alert("点击");
        };
      };
      alert("hello");
    </script>
  </body>
</html>
